<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我不是个IT男</title>
    <link href="webjars/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.js"></script>
    <script src="/webjars/bootstrap/js/bootstrap.js"></script>
    <script src="/js/holder.min.js"></script>
    <style type="text/css">
    img{
        height:100%;
        width:100%;
    }
    .page{
        margin-top:100px;
        margin-botton:50px;
        height:600px;
        overflow:hidden;
        padding:0px;
    }
    .info{
        overflow:hidden;
    }
    .page .pagebg{
        position:absolute;
        left:0px;
        top:0px;
        height:100%;
        width:100%;
    }
    .page .pagefg{
        position:absolute;
        left:0px;
        top:0px;
        height:100%;
        width:100%;
        display: none;
    }
    .page .text{
        position:absolute;
        left:0px;
        top:0px;
        height:100%;
        width:100%;
        display: none;
    }
    .page .text a{
        text-decoration:none;
    }
    .page .text h3{
        width:100%;
        line-height:100px;
        margin-top:250px;
        text-align:center;
        color:#FFFFFF;
        background:#000000;
        font-family:"microsoft yahei";
        font-size:50px;
    }
    body{
        background:#EAEAEA;
        background-size:100%;
    }
    h1{
        text-align:center;
<!--        color:#FFFFFF;-->
    }
    h2{
<!--        color:#FFFFFF;-->
    }
    .jumbotron{
        background-color:#D0D0D0;
        padding:25px;
        margin-top:50px;
        border-radius:25px;
        box-shadow: 10px 10px 5px #888888;
    }


    </style>
</head>
<body data-spy="scroll" data-target=".bs-js-navbar-scrollspy">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle"
                    data-target=".bs-js-navbar-scrollspy" data-toggle="collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">我不是个IT男</a>
        </div>
        <div class="navbar-collapse collapse bs-js-navbar-scrollspy" id="navbar">
            <ul class="nav navbar-nav">
                <li><a href="#home">主页</a></li>
                <li><a href="#yesterday">昨天</a></li>
                <li><a href="#today">今天</a></li>
                <li><a href="#tomorrow">明天</a></li>
                <li class="dropdown">
                    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"
                       href="#"
                       role="button">我的<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://134.175.226.72:8000/">workpress</a></li>
                        <li class="divider" role="separator"></li>
                        <li><a href="http://134.175.226.72:8010/onepoint_college/manager/home/login.html">Onepoint
                            College</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
<div id="home" class="container">
    <div class="row">
        <div class="page col-md-4 col-xs-4">
            <div class="pagebg">
                <img src="/img/list_yesterday.jpg">
            </div>
            <div class="pagefg">
                <img data-src="holder.js/1000x1000/auto/#777:#555/text: ">
            </div>
            <div class="text"><a href="#yesterday"><h3>昨天</h3></a></div>
        </div>
        <div class="page col-md-4 col-xs-4">
            <div class="pagebg">
                <img src="/img/list_today.jpg">
            </div>
            <div class="pagefg">
                <img data-src="holder.js/1000x1000/auto/#777:#555/text: ">
            </div>
            <div class="text"><a href="#today"><h3>今天</h3></a></div>
        </div>
        <div class="page col-md-4 col-xs-4">
            <div class="pagebg">
                <img src="/img/list_tomorrow.jpg">
            </div>
            <div class="pagefg">
                <img data-src="holder.js/1000x1000/auto/#777:#555/text: ">
            </div>
            <div class="text"><a href="#tomorrow"><h3>明天</h3></a></div>
        </div>
    </div>
</div>
<div id="yesterday" class="container jumbotron">
    <div class="info col-md-4"><img src="/img/line_yesterday.jpg" class="img-rounded"></div>
    <div class="info col-md-8">
        <h1>昨天</h1>
        <h2>昨天，已过去！</h2>
    </div>
</div>
<div id="today" class="container jumbotron">
    <div class="info col-md-8">
        <h1>今天</h1>
        <h2>今天，哎呦，不错喔！</h2>
    </div>
    <div class="info col-md-4"><img src="/img/line_today.jpg" class="img-circle"></div>
</div>
<div id="tomorrow" class="container jumbotron">
    <div class="info col-md-4"><img src="/img/line_tomorrow.jpg" class="img-rounded"></div>
    <div class="info col-md-8">
        <h1>明天</h1>
        <h2>明天，会更好！</h2>
    </div>
</div>
</body>
<script>
$(document).ready(function(){
    $(".page .pagefg").hide();
    $(".page .text").css({left:-$(this).width()});
    $(".page .text").show();
    $(".page").hover(function(){
        $(this).find(".pagefg").stop().fadeTo(500,0.7);
        $(this).find(".text").stop().animate({left:'0'}, {duration: 500});
    },function(){
        $(this).find(".pagefg").stop().fadeTo(500,0);
        $(this).find(".text").stop().animate({left:$(this).width()}, {duration: "fast"});
        $(this).find(".text").animate({left:-$(this).width()}, {duration: 0});
    });
});











</script>
</html>